<!-- icon 资源文件对应说明
	1：心碎icon ：http://static.kuaimayoupin.com/6385206718476149.png
	2: 鲜花不够背景图：http://static.kuaimayoupin.com/0191546029126881.png  
 -->
<template>
	<view @click.stop="dismiss" class="layer" v-if="isShow">
		<view  @click.stop="centerClickAction" class="layer_center">
			<image class="heart-broken-img" src="http://static.kuaimayoupin.com/6385206718476149.png" />
			<text class="title-text">亲～玫瑰库存不够啦</text>
			<view class="my-flowers">
				<text>我的玫瑰：</text>
				<text>{{ getMyroseCount() }}</text>
				<image src="../../../static/images/home/flower.png"></image>
			</view>
			<text class="des-text">可在商城直接消费哦</text>
			<view class="pay-flowers">
				<text>本次消耗：</text>
				<text>{{roseData.sendCount || 0}}</text>
				<image src="../../../static/images/home/flower.png"></image>
				<view class="bottom-gradient"></view>
			</view>
			<view class="bottom-container">
				<view @click.stop="toPayAction" class="pay-btn">
					<text>去充值</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		props:{
			isShow: Boolean,
			roseData: Object,
			
		},
		data() {
			return {
				
			}
		},
		
		methods:{
			getMyroseCount(){
				let vipInfo = uni.getStorageSync('vipInfo') || {};
				return vipInfo.balance || 0
			},
			dismiss(){
				console.log("not enough dismiss")
				this.$emit("dismiss")
			},
			centerClickAction(){
				console.log("centerClickAction click")
			},
			toPayAction(){
				this.dismiss()
				// uni.navigateTo({
				// 	url:"/pageA/rose/rose"
				// })
			}
		},
		mounted() {
			console.log("hello gift")
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
		display: flex;
	}
	.layer {
		display: flex;
		flex-direction: column;
		align-items:center;
		justify-content: center;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 700;
		background: rgba(0,0,0,0.4);
		.layer_center {
			position: relative;
			display: flex;
			width: 494rpx;
			height: 506rpx;
			background-image: url('http://static.kuaimayoupin.com/0191546029126881.png');
			background-size: 100%;
			flex-direction: column;
			align-items: center;
			.heart-broken-img {
				width: 96rpx;
				height: 72rpx;
				position: absolute;
				top: -30rpx;
			}
			.title-text {
				height:48rpx;
				font-size:34rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(71,74,88,1);
				line-height:48rpx;
				margin-top: 60rpx;
				margin-bottom: 42rpx;
			}
			.my-flowers {
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					font-size:30rpx;
					font-weight:500;
					color:rgba(131,137,160,1);
					line-height:42rpx;
				}
				image {
					margin-left: 12rpx;
					width: 30rpx;
					height: 32rpx;
				}
			}
			.des-text {
				margin-top: 14rpx;
				margin-bottom: 30rpx;
				font-size:26rpx;
				font-weight:400;
				color:rgba(131,137,160,1);
				line-height:36rpx;
			}
			.pay-flowers {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					font-size:30rpx;
					font-weight:500;
					color:rgba(71,74,88,1);
					line-height:42rpx;
				}
				image {
					margin-left: 12rpx;
					width: 30rpx;
					height: 32rpx;
				}
				.bottom-gradient {
					position: absolute;
					left: 0;
					bottom: 0;
					width:180rpx;
					height:10rpx;
					background:linear-gradient(135deg,rgba(254,195,71,1) 0%,rgba(254,195,71,0) 100%);
				}
			}
			.bottom-container {
				display: flex;
				flex: 1;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				
				.pay-btn {
					width:376rpx;
					height:80rpx;
					margin-bottom: 60rpx;
					background:linear-gradient(135deg,rgba(252,79,145,1) 0%,rgba(253,108,230,1) 100%);
					border-radius:4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text {
						font-size:34rpx;
						font-weight:500;
						color:rgba(255,255,255,1);
						line-height:48rpx;
					}
				}
				
			}
		}
			
	}
</style>

